<template>
  <div id="app">
    <!--//缩放功能主要是缩放VueDrangResize标签-->
    <VueDragResize  :w="200" :h="200" v-on:resizing="resize" v-on:dragging="resize">
      <!-- 图片缩放 -->
      <!--将这个div的宽高动态设置==VueDrangResize的宽高这样可实时完成缩放-->
      <!-- <div class="box" :style="{width: + vw+ 'px',height:+vh+'px'}" >我这写的是本地的图片，图片可以动态获取-->
      <!--<img src="../assets/logo.png" style="width: 100%;height: 100%"> style="width: 200px;height: 200px"-->
      <div id="main" ref="main" :style="{width:'100%', height: '100%'}" style="background-color: #ff2141">
      </div>

      <!-- </div>-->
    </VueDragResize>
  </div>
</template>
<script>
import VueDragResize from 'vue-drag-resize'
const echarts = require('echarts/lib/echarts') // 引入echarts
require('echarts/lib/chart/bar') // 引入柱状图
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
  data () {
    return {
      histogramLegend: {
        radius: 0,
        postColosr: '#3ea915',
        labColor: '#000000',
        labSize: 10
      },
      xData: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
      yData: [5, 2, 3, 4, 10, 20],
      vw: 0,
      vh: 0,
      top: 0,
      left: 0
    }
  },
  mounted () {
    // this.resize() // 直接加这句即可
    this.initEcharts()
  },
  components: {
    VueDragResize
  },
  created () {
    this.vw = 200 + 'px'
    this.vh = 200 + 'px'
  },
  // 初始化渲染。
  // 缩小
  resize (newRect) {
    this.vw = newRect.width
    this.vh = newRect.height
    this.top = newRect.top
    this.left = newRect.left
  },
  methods: {
    initEcharts () {
      // const THIS = this
      // const mainDiv = this.$refs.main // 找到绘制的区域,强烈推荐使用refs
      const mainDiv = document.getElementById('main')
      const myChart = echarts.init(mainDiv) // 初始化
      myChart.setOption({ // 官网例子
        tooltip: {},
        xAxis: {
          data: this.xData,
          axisLabel: {
            color: this.histogramLegend.labColor, // 刻度标签
            fontSize: this.histogramLegend.labSize
          }
        },
        yAxis: {
          axisLabel: {
            color: this.histogramLegend.labColor, // 刻度标签
            fontSize: this.histogramLegend.labSize
          }
        },
        series: [{
          name: '待写',
          type: 'bar',
          data: this.yData,
          itemStyle: {
            barBorderRadius: this.histogramLegend.radius,
            color: this.histogramLegend.postColosr
          }
        }]
      })
    }
  },
  watch: {
    vh (old, val) {
      this.mounted()
      console.log('旧值' + old + '高为' + val)
    },
    vw (val) {
      this.initEcharts()
      console.log('宽为' + val)
    }
  }

}
</script>
<style lang="scss" scoped>

</style>
